<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        background-color: #f5f5f5;
      }
      h1 {
        color: #af4248;
        text-align: center;
      }
      .content {
        width: 600px;
        height: 400px;
        background: white;
        margin: 0 auto;
      }
      input {
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        border: 0;
      }
      li {
        padding: 10px;
        box-sizing: border-box;
        list-style: none;
        display: flex;
        justify-content: space-between;
      }
    </style>
  </head>
  <body>
    <h1>记事本</h1>
    <div class="content">
      <input type="text" />
      <ul>
        <li>
          <span>张三：</span>
          <span>加快速度发个快手结婚的过来看手机号</span>
          <span>2025-05-08 12:32:56</span>
          <span>X</span>
        </li>
      </ul>
    </div>

    <script>
      // 回车添加内容
      let input = document.querySelector("input");
      input.onkeyup = function (e) {
        if (e.keyCode == "13") {
          // 写逻辑
          // 获取输入的内容
          let val = input.value;
          let li = document.createElement("li");
          li.innerHTML = `<span>张三：</span>
                 <span>${val}</span>
                 <span>${setdate()}</span>
                 <span class="del">X</span>`;
          document.querySelector("ul").appendChild(li);
          //   添加删除事件
          let dels = document.querySelectorAll(".del");
          dels.forEach((item) => {
            item.onclick = function () {
              this.parentNode.remove();
            };
          });
        }
      };
      // 获取当前时间
      function setdate(params) {
        let date = new Date();
        // 获取年份
        let year = date.getFullYear();
        // 获取月份 0-11
        let minth = date.getMonth() + 1;
        // 获取日期
        let day = date.getDate();
        // 获取时
        let hh = date.getHours();
        // 获取分
        let mm = date.getMinutes();
        // 获取秒
        let ss = date.getSeconds();

        return `${year}-${minth}-${day} ${hh}:${mm}:${ss}`;
      }
    </script>
  </body>
</html>
